import React, { useCallback, useState } from "react";
import { useContext } from "react";

class Button extends React.Component{
  shouldComponentUpdate(nextprops){
    if(this.props.onClickButton===nextprops.onClickButton)
    {
      return false
    }
    return true
  }
  render() {
    const {onClickButton,children}=this.props
    return (
       <>
       <button onClick={onClickButton}>{children}</button>
       <span>{Math.random()}</span>
       </>
    );
  }
}

export default function App(){
  const [sount1,setCount1]=useState(0)
  const [sount2,setCount2]=useState(0)
  const [sount3,setCount3]=useState(0)

  const handleClickButton = () =>{
    setCount1(sount1 + 1)
  }
  // useCallback 接收一个函数和一个依赖项数组作为参数，然后返回一个 memoized 版本的函数。如果依赖项数组中的任何一个依赖项发生更改，则 useCallback 会返回一个新的函数。如果依赖项数组不变，则 useCallback 将返回上次 memoized 的函数。
  // 使用 useCallback 的好处是可以避免在每次重新渲染时都创建新的回调函数，从而减少不必要的组件重新渲染。尤其是当传递给子组件的回调函数发生更改时，这种优化可以显著提高性能。
  

  const handleClickButton2 = useCallback(() => {
    setCount2(sount2 + 1)
  },[sount2])

  return(
    <div>
      <div>
        <Button onClickButton={handleClickButton}>Button1</Button>
      </div>
      <div>
        <Button onClickButton={handleClickButton2}>Button2</Button>
      </div>
      <div>
        <Button onClickButton={() => {
          setCount3(sount3 + 1)
        }}>Button1</Button>
      </div>
    </div>
  )
}